<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>商城-购物车</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 为开发方便为,所使用的JS和CSS文件本地引用，在生产环境中请考虑使用CDN加速服务 -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
  <!-- 以下为IE8的兼容性脚本，如果从文件夹中直接打开页面无效，需要部署到服务器端访问才能生效 -->
  <!--[if lt IE 9]>
  <script src="${pageContext.request.contextPath}/js/html5shiv.js"></script>
  <script src="${pageContext.request.contextPath}/js/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <!-- 这里插入LOGO图标 -->
          <!-- <img alt="LOGO" src="images/logo.png"/>-->LOL网上商城
        </a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
              <li class="dropdown" id="car">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">我的购物车<span style="color: #ffff00">${sessionScope.carSize }<c:if test="${empty sessionScope.carSize }">0</c:if></span>件</a>
                  <ul class="dropdown-menu" role="menu">
                  	<c:forEach items="${sessionScope.car }" var="carBean">
                      <li><a href="${pageContext.request.contextPath}/customer/showProductDetail.action?commodityId=${carBean.value.commodity.id}">${carBean.value.commodity.commodityName }<span class="badge">${carBean.value.count }</span></a></li>
                    </c:forEach>
                      <li class="divider"></li>
                      <li><a href="#">共<span style="color: red">${sessionScope.totalPrice }<c:if test="${empty sessionScope.totalPrice }">0</c:if></span>元</a><a href="${pageContext.request.contextPath}/customer/showCar.action" class="btn btn-default">结算</a></li>
                  </ul>
              </li>
          </ul>
          <form class="navbar-form navbar-right" role="search" action="${pageContext.request.contextPath}/customer/showProduct.action">
              <div class="form-group">
                  <input type="text" class="form-control" name="commName" placeholder="输入商品进行查询">
              </div>
              <button type="submit" class="btn btn-default">搜索</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
              <li>
                  <a href="${pageContext.request.contextPath}/customer/index.action">首页</a>
              </li>
              <li>
                  <a href="${pageContext.request.contextPath}/customer/showProduct.action">商品列表</a>
              </li>
              <c:if test="${sessionScope.user==null }">
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_loginUI.action">登录</a>
	              </li>
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_registerUI.action">注册</a>
	              </li>
              </c:if>
              <c:if test="${sessionScope.user!=null }">
              	  <li>
	                  	<a href="">欢迎，${sessionScope.user.userAccount }</a>
	              </li>
	              <li>
	                  <a href="${pageContext.request.contextPath}/customer/user_logout.action" onclick="return confirm('确定要注销吗？')">注销</a>
	              </li>
	              <li class="dropdown">
	                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">个人中心</a>
	                  <ul class="dropdown-menu" role="menu">
	                      <li><a href="${pageContext.request.contextPath}/customer/showDataSet.action">资料设置</a></li>
	                      <li><a href="${pageContext.request.contextPath}/customer/showAccount.action">账户</a></li>
	                      <li><a href="${pageContext.request.contextPath}/customer/showOrder.action">我的订单</a></li>
	                  </ul>
	              </li>
              </c:if>
          </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <img src="${pageContext.request.contextPath}/img/dai.png">
      </div>
    </div>
    <br>
    <div class="row">
        <form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/customer/settle.action" method="post">
        <div class="col-xs-12">
            <h4>收货地址</h4><a href="" class="btn btn-default" data-toggle="modal" data-target="#selectContactBlock">选择联系人</a><a href="javascript:;" class="btn btn-default" onclick="resetVal()">重置</a>
            <div class="col-xs-12">
                    <div class="form-group">
                        <label for="contact" class="col-sm-2 control-label">收货人</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="contact" name="contactName" placeholder="收货人" required="required">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mobile" class="col-sm-2 control-label">收货人联系电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="收货人联系电话" required="required">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="address" class="col-sm-2 control-label">收货地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="address" name="address" placeholder="收货地址" required="required">
                        </div>
                    </div>
            </div>
        </div>
        <div class="col-xs-12">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品生产商</th>
                        <th>数量</th>
                    </tr>
                </thead>
                <tbody>
                	<c:forEach items="${sessionScope.car }" var="carBean">
	                    <tr>
	                        <td>${carBean.value.commodity.commodityName }</td>
	                        <td>￥${carBean.value.commodity.commodityPrice }</td>
	                        <td>${carBean.value.commodity.commodityManufacturer }</td>
	                        <td>${carBean.value.count }</td>
	                    </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
        <div class="col-xs-12">
            <h4>备注</h4>
            <div class="form-group">
                <label for="content" class="col-sm-2 control-label">买家备注</label>
                <div class="col-sm-10">
                    <textarea id="content" name="orderFormRemark" class="form-control"></textarea>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <h4>支付方式</h4>
            <div class="form-group">
                <label class="col-sm-2 control-label">支付方式</label>
                <label class="col-sm-2 control-label">货到付款</label>
                <div class="col-sm-1" style="padding-top: 7px">
                    <input type="radio" name="orderFormPayType" value="0">
                </div>
                <label class="col-sm-2 control-label">在线支付</label>
                <div class="col-sm-1" style="padding-top: 7px">
                    <input type="radio" name="orderFormPayType" value="1">
                </div>
            </div>
        </div>
        <div class="col-xs-12 text-right">
        	<input type="hidden" name="orderFormTotalPrice" value="${sessionScope.totalPrice }">
            <h4>共计&nbsp;&nbsp;${sessionScope.totalPrice }元</h4>
            <button type="submit" class="btn btn-danger">结算</button>
        </div>
        </form>
    </div>

</div>

					<div class="modal fade" id="selectContactBlock" tabindex="-1" role="dialog" aria-hidden="true">
					    <div class="modal-dialog">
					      <div class="modal-content">
					        <div class="modal-header">
					          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
					          <h4 class="modal-title">选择联系人</h4>
					        </div>
					        <div class="modal-body">
					        <table class="table table-hover">
                          <thead>
                              <tr>
                                  <th>联系人</th>
                                  <th>联系电话</th>
                                  <th>联系地址</th>
                                  <th>操作</th>
                              </tr>
                          </thead>
                          <tbody>
                          	<c:forEach items="${shippingAddressList }" var="contact">
                               <tr>
                                    <td id="contact_${contact.id }">${contact.contactName }</td>
                                    <td id="mobile_${contact.id }">${contact.mobile }</td>
                                    <td id="address_${contact.id }">${contact.address }</td>
                                    <td><a href="javascript:;" onclick="selectVal(${contact.id })">选择</a></td>
                               </tr>
                            </c:forEach>
                          </tbody>
                      </table>
					          </div>
					          <div class="modal-footer">
					            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					          </div>
					      </div>
					    </div>
					  </div>

  <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col-xs-12"><p class="text-center">COPYRIGHT &copy; 2014 LUOJIE. ALL RIGHTS RESERVED.</p></div>
      </div>
    </div>
  </footer>

  <!-- 外部JS脚本文件 -->
  <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  	function resetVal(){
  		$("#contact").val("");
  		$("#mobile").val("");
  		$("#address").val("");
  	}
  	function selectVal(id){
  		$("#contact").val($("#contact_"+id).text());
  		$("#mobile").val($("#mobile_"+id).text());
  		$("#address").val($("#address_"+id).text());
  		$("#selectContactBlock").modal('hide');
  	}
  </script>
</body>

</html>